<template>
  <header-title headerTitle="newsDetail" @goBack="goBack" />
  <div class="news-detail" v-if="detail.content">
    <h5>{{ detail.title }}</h5>
    <div class="name flex-row">
      <span>{{ detail.author_name }}</span>
      <div class="flex-row like-div">
        {{ i18n.$t('storeUp') }}&nbsp;&nbsp;
        <p class="icon-right" @click="checkLike">
          <van-icon
            :name="[detail.active ? 'like' : 'like-o']"
            :class="[detail.active ? 'show' : 'hide']"
          />
        </p>
      </div>
    </div>
    <p class="date">{{ detail.date }}</p>
    <div v-html="detail.content" class="news-text"></div>
    <!-- <iframe :src="detail.url" frameborder="0"></iframe> -->
  </div>
  <div class="no-msg" v-else>
    <van-icon name="description" />
    <p>数据已用光，请明天再试~</p>
  </div>
</template>

<script lang="ts">
  import { toRefs, defineComponent, onMounted, reactive } from 'vue'

  import { HeaderTitle } from '@/components'

  //接口
  import { getNewsDetail, addCellect } from '@/serve/api'

  //路由
  import { useRouter, useRoute } from 'vue-router'
  //缓存
  import { useStore } from 'vuex'

  import { useI18n } from '@/i18nPlugin'

  import { Toast } from 'vant'

  export default defineComponent({
    nem: 'newsDetail',
    components: {
      HeaderTitle
    },
    setup: () => {
      const i18n = useI18n()
      const router = useRouter()
      const route = useRoute()
      const store = useStore() // 使用useStore方法
      const data = reactive({
        detail: {
          id: '',
          content: '',
          active: false, //收藏状态
          title: '',
          author_name: '',
          thumbnail_pic_s: '',
          img: '',
          date: ''
        }
      })
      let initData = () => {
        let req = {
          uniquekey: route.query.id
        }
        getNewsDetail(req).then((res: any) => {
          if (res.data.detail) {
            data.detail = res.data.detail
            data.detail.content = res.data.content
            data.detail.id = res.data.uniquekey
          }
        })
      }
      let checkLike = () => {
        data.detail.active = !data.detail.active
        // addCellectFunc()
        if (data.detail.active) Toast('收藏成功😊')
        else Toast('取消收藏😟')
      }
      let addCellectFunc = () => {
        let req = {
          title: data.detail.title,
          author_name: data.detail.author_name,
          date: data.detail.date,
          uniquekey: data.detail.id,
          img: data.detail.thumbnail_pic_s,
          userCode: store.state.userData.userCode
        }
        // console.log(JSON.parse(JSON.stringify(req)))
        addCellect(req).then((res: any) => {
          // console.log(res)
          if (res.data.responseCode === 1000) {
            router.replace(store.state.detailBackType)
          }
        })
      }
      const goBack = () => {
        console.log(JSON.parse(JSON.stringify(data)))
        if (data.detail.active && store.state.userData.userCode) {
          addCellectFunc()
        } else if (data.detail.content) {
          store.commit('SET_NEWS_DETAILS', data.detail)
          router.replace(store.state.detailBackType)
        } else {
          router.replace(store.state.detailBackType)
        }
      }
      onMounted(() => {
        console.log(store.state.detailBackType)
        // console.log(JSON.parse(JSON.stringify(store.state.newsDetails)))
        // console.log(store.state.userCode)
        let isHttp = true
        //查找本地数据，存在则取本地缓存，else取接口
        store.state.newsDetails.forEach((item: any) => {
          if (item.id === route.query.id) {
            data.detail = item
            isHttp = false
            // console.log(data)
          }
        })
        if (isHttp) {
          initData()
        }
      })
      return {
        checkLike,
        goBack,
        initData,
        onMounted,
        i18n,
        ...toRefs(data)
      }
    }
  })
</script>

<style scoped lang="scss">
  .news-detail {
    padding: 70px 5% 60px 5%;
    h5 {
      font-size: 20px;
      margin: 10px 0;
    }
    .name {
      margin-left: 5px;
      color: #ccc;
      font-size: 12px;
    }
    .date {
      text-align: right;
      font-size: 14px;
      margin: 10px 0;
    }
  }
  .news-text {
    font-size: 14px;
    margin: 10px 0;
  }
  .news-text p {
    margin: 5px 0;
  }
  .icon-right {
    position: relative;
    .like {
      position: absolute;
      font-size: 24px;
      right: 0;
      top: -13px;
      width: 24px;
      transition: all 0.2s linear;
    }
  }
  .show {
    color: red;
    font-size: 26px;
  }
  .hide {
    color: #ccc !important;
    font-size: 26px;
  }
  .no-msg {
    padding-top: 100px;
    min-height: 500px;
    .van-icon {
      font-size: 100px;
      color: #ccc;
    }
    .van-icon,
    .van-icon:before {
      display: block;
      text-align: center;
    }
    p {
      color: #ccc;
      font-size: 12px;
      margin-top: 20px;
      text-align: center;
    }
  }
</style>
